<template>
  <div class="PictureList">
    <el-scrollbar style="min-height: 68px">
      <VueDraggableNext
        class="PictureList flex flex-wrap px-2 py-4"
        v-model="PictureList"
      >
        <div v-for="(item, index) in PictureList" :key="item.image_link">
          <div
            class="mr-2 mb-4"
            style="width: 85px"
            v-if="
              (props.imageSource == item.image_source || !props.imageSource) &&
              !item.delete
            "
          >
            <div class="mb-2 relative parent">
              <svg-icon
                v-if="!props.isMainPic && !disabled"
                icon-class="state_fail_cover"
                class="absolute -right-1.5 -top-1.5 text-white z-10"
                @click="handleDel(index)"
              />
              <VImage
                ref="imageRef"
                v-if="props.imageType != 4"
                :src="item.image_link_watermark || item.image_link"
                :previewlist="photoSort(item, PictureList)"
                :width="85"
                :height="85"
              ></VImage>
              <video
                v-if="props.imageType == 4"
                :src="item.image_link"
                controls="controls"
                style="width: 85px; height: 85px"
              >
                您的浏览器不支持 video 标签。
              </video>
              <div
                class="absolute left-[1px] top-[1px] flex rounded-tl rounded-br overflow-hidden bg-[#000000]"
              >
                <div
                  class="bg-[#3487FF] text-white text-xs px-1 rounded-br"
                  v-if="props.imageType == 3 && main_img == item.image_link"
                >
                  主图
                </div>
                <div class="text-white text-xs px-1">
                  {{ computeImageType(item.image_link) }}
                </div>
              </div>

              <div
                v-if="props.imageType != 4"
                class="absolute left-0 right-0 top-0 bottom-2 child pt-[2px]"
              >
                <div
                  v-if="props.imageType == 3 && !disabled"
                  class="text-[#ffffff] cursor-pointer text-center text-sm"
                  @click="handleChecked(item, index)"
                >
                  设置主图
                </div>
                <div
                  class="text-[#ffffff] cursor-pointer mr-1 text-center text-sm mt-2"
                  @click="handleview(item, PictureList)"
                >
                  大图
                </div>
              </div>
            </div>
            <el-tooltip
              className="item"
              effect="dark"
              :content="item.image_name"
              placement="top"
            >
              <div class="line1">{{ item.image_name }}</div>
            </el-tooltip>

            <template v-if="props.imageType != 4">
              <SelectImageType
                v-if="!disabled"
                v-model="PictureList[index].image_for"
                placeholder="类型"
                clearable
                :options="options['gallery.GoodsSkuGalleryContents']?.[0].imageForText"
                @change="changeImageType($event, index)"
              ></SelectImageType>
              <template v-else> {{ PictureList[index].image_for_text }}</template>
            </template>
            <div class="text-[#e50113]">{{ item.image_size }}</div>
          </div>
        </div>
      </VueDraggableNext>
    </el-scrollbar>
  </div>
  <DialogImage ref="DialogImageRef"></DialogImage>
</template>

<script setup name="List">
import VImage from "@/components/Image/index.vue";
let options = reactive(inject("options"));
let handleType = reactive(inject("handleType"));
let formData = reactive(inject("form"));
import { photoSort, computeImageType } from "@/utils/index";
import { downLoadImage } from "@/utils/downloadFile.js";
import { VueDraggableNext } from "vue-draggable-next";
import SelectImageType from "@/components/Selects/SelectImageType/index.vue";
import DialogImage from "@/components/DialogImage/index.vue";

const emit = defineEmits(["update:modelValue"]);

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  imageType: {
    type: Number,
  },
  isMainPic: {
    type: Boolean,
    default: () => false,
  },
  imageSource: {
    type: [Number, String],
  },
  currentIndex: {
    type: Number,
  },
});

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    (handleType.value == "edit" &&
      !(window.BTN_AUTH || []).includes("/goods/task/product/picture-info"))
  );
});

const PictureList = computed({
  get: () => props.modelValue,
  set: (list) => {
    emit("update:modelValue", list);
  },
});

const main_img = computed(() => {
  return formData.value.goods_sku[props.currentIndex].attr_img;
});

// 单选
const handleChecked = (item, index) => {
  formData.value.goods_sku[props.currentIndex].attr_img = item.image_link;
  formData.value.goods_sku[props.currentIndex].image_link_watermark =
    item.image_link_watermark;

  PictureList.value.forEach((element) => {
    if (element != item) {
      element.is_main = 0;
    }
  });
  const element = PictureList.value.splice(index, 1)[0];
  PictureList.value.unshift(element);
};
const handleDel = (index) => {
  if (handleType.value == "edit") {
    PictureList.value[index].delete = 1;
  } else {
    PictureList.value.splice(index, 1);
  }
};

const handleDownload = (row) => {
  downLoadImage(row.image_link, row.image_name);
};

// 预览图片
const DialogImageRef = ref();
const handleview = (item, PictureList) => {
  DialogImageRef.value.open(photoSort(item, PictureList));
};
</script>

<style lang="scss" scoped>
.parent:hover .child {
  display: block;
}

.child {
  display: none;
  background: rgba(0, 0, 0, 0.4);
}
</style>
